<template>
  <div>
    <paramsModify ref="Modify"></paramsModify>
    <paramsAdd :update="update" ref="Add"></paramsAdd>
    <Nav :paths="paths"></Nav>
    <br />
    <el-card>
      <el-tag type="warning">注意：只允许为第三级分类设置相关参数！</el-tag>
      <br />
      <br />
      <br />
      <span>选择商品分类: </span>
      <el-cascader :options="options" clearable @change="change"></el-cascader>
      <el-tabs v-model="active" @tab-click="clickTabs">
        <el-tab-pane  label="动态参数" name="first">
          <paramsList :parentRef="ParentRef" v-if="current!==-1" :parentId="current" :manyData="manyData"></paramsList>
        </el-tab-pane>
        <el-tab-pane label="静态参数" name="second">
          <paramsList></paramsList>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script lang="ts">

import { Component, Vue } from 'vue-property-decorator'
import Nav, { paths } from '@/components/Nav'
import { getCategories } from '@/api/categories'
import { getAttributes } from '@/api/attributes'
import ParamsList from '@/components/goods/params/params_list.vue'
import ParamsModify from '@/components/goods/params/params_modify.vue'
import ParamsAdd from '@/components/goods/params/params_add.vue'

interface Data {
  'cat_id':number,
  'cat_name':string,
  children?:Array<Data>
}
interface Tree {
  value:string|number,
  label:string,
  children?:Array<Tree>
}
@Component({
  components: { ParamsAdd, ParamsModify, ParamsList, Nav }
})
export default class Params extends Vue {
  private current = -1
  public manyData = []
  public ParentRef:any

  private active='first'

  open (
    smg = '登陆成功',
    type: 'success' | 'warning' | 'info' | 'error' = 'success'
  ) {
    this.$message({
      message: smg,
      type: type
    })
  }

  clickTabs (par:any) {
    // console.log(par)
  }

  getTree (data:Array<Data>) {
    const treeArr:Array<Tree> = data.map(data => {
      const tree:Tree = {
        label: data.cat_name,
        value: data.cat_id
      }
      if (data.children) {
        tree.children = this.getTree(data.children)
      }
      return tree
    })
    return treeArr
  }

  update () {
    this.change([this.current])
  }

  async change (param:Array<number>) {
    this.current = param[param.length - 1]
    const { data } = await getAttributes(this.current, 'many')
    this.manyData = data
  }

  created () {
    this.render1()
  }

  mounted () {
    this.ParentRef = this.$refs
    this.ParentRef.render = this.change
  }

  async render1 () {
    const { data } = await getCategories({})
    this.options = this.getTree(data)
  }

  public paths: paths = [
    {
      path: '/index',
      pName: '首页'
    },
    {
      path: '/index/params',
      pName: '商品管理'
    },
    {
      path: '/index/params',
      pName: '商品分析'
    }
  ]

  // #region
  public options:Array<Tree> = []
  // #endregion
}
</script>

<style scoped>

</style>
